<script setup>
import HeaderBox from '../views/ShopPages/HeaderBox.vue'
import AsideBox from '../views/ShopPages/AsideBox.vue'
import MainBox from '@/views/ShopPages/MainBox.vue';
</script>

<template>
  <div class="common_layout">
   <el-container>
     <el-header>
      <HeaderBox />
     </el-header>
     <el-container>
       <el-aside width="collapse">
        <AsideBox />
       </el-aside>
       <el-main>
        <MainBox />
       </el-main>
     </el-container>
   </el-container>
 </div>
</template>

<style lang="scss" scoped>

.common_layout{
 width:100vw;
 height:100vh;
 box-sizing: border-box;
 background-color: #eee;
 overflow: hidden;

 .el-container{
  height:100%;
 }
 .el-header{
  background-color: white;
 }
 .el-main{
  padding:0
 }
}

</style>
